<template>
  <div class="contentPage">
    <div class="contentM">
      <el-steps :active="active" finish-status="success" style="width:50%; margin:20px auto">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="步骤 3"></el-step>
      </el-steps>
      <div class="contentN">
        <div class="stepPages" v-if="active==0">
          <div class="invoice" id="invoice">
            <div class="invoiceTop">
              <h3>
                <span class="logo"><img src="./../assets/images/zpLogo_03.png"></span>收款专用收据<font style="color:red">（未缴费）</font><em>NO.{{detailMes.serialNumber}}</em>
                <div class="clear"></div>
                </h3>

              <P><span>姓名:{{detailMes.studentName}}</span><span>年级：{{detailMes.gradeName}}</span><span>班级:<em v-if="detailMes.className==null||detailMes.className==''||detailMes.className==undefined">未设置分班</em><em v-else>{{detailMes.className}}</em></span><span>联系方式:{{detailMes.mobile}}</span><span>收款日期:{{timeSet.year}}年{{timeSet.mounth+1}}月{{timeSet.day}}日</span></P>
            </div>
            <div class="invoiceCenter">
              <div class="fakeTable">
                <div class="fakeTableHeader">
                  <div style="flex:4"><em>项目</em></div>
                  <div style="flex:2"><em>数量</em></div>
                  <div style="flex:2"><em>单价</em></div>
                  <div style="flex:9">
                    <div><em>金额</em></div>
                    <div><span>佰</span><span>拾</span><span>万</span><span>仟</span><span>佰</span><span>拾</span><span>元</span><span>角</span><span>分</span></div>
                  </div>
                  <div style="flex:2"><em>备注</em></div>
                </div>
                <div class="fakeTableBody">
                  <div class="fakeTableBodyN" v-for="(a,index) in detailMes.itemList" v-show="detailMes.isDetailed==1" :key="index">
                    <div style="flex:4"><em>{{a.itemName}}</em></div>
                    <div style="flex:2"><em>1</em></div>
                    <div style="flex:2"><em>{{a.money}}</em></div>
                    <div style="flex:9">
                      <div>
                        <span v-for="(b,index2) in 9-a.listMoney.length" :key="'B'+index2"></span>
                        <span v-for="(c,index3) in a.listMoney" :key="'C'+index3">{{c}}</span>
                      </div>
                    </div>
                    <div style="flex:2"></div>
                  </div>
                  <div class="fakeTableBodyN" v-if="tuifei">
                    <div style="flex:4"><em>减免金额</em></div>
                    <div style="flex:2"><em>1</em></div>
                    <div style="flex:2"><em>{{jianmianNum}}</em></div>
                    <div style="flex:9">
                      <div>
                        <span v-for="(b,index4) in 9-jianmianList.length" :key="'B'+index4"></span>
                        <span v-for="(c,index5) in jianmianList" :key="'C'+index5">{{c}}</span>
                      </div>
                    </div>
                    <div style="flex:2"></div>
                  </div>
                  <div class="fakeTableBodyN">
                    <div style="flex:6;">
                      <em v-if="detailMes.isDetailed!=1">
                        <font style="display: inline-block; width:66%;">收费项</font><font style="display: inline-block; width:35%;">1</font>
                      </em>
                      <em v-else></em>
                    </div>
                    <div style="flex:2;"><em>合计</em></div>
                    <div style="flex:9;">
                      <div>
                        <span v-for="(d,index4) in 9-totalMoney.length" :key="'D'+index4"></span>
                        <span v-for="(e,index5) in totalMoney" :key="'E'+index5">{{e}}</span>
                      </div>
                    </div>
                    <div style="flex:2;"></div>
                  </div>
                  <div class="fakeTableBodyN">
                    <div style="flex:17;">
                      <em ref="daxie" id="daxie" style="text-align:left; padding:10px;">金额大写(大写):
                        <!-- <i v-for="(f,index6) in 9-totalMoney.length" :key="'F'+index6"></i>
                        <i v-for="(g,index7) in totalMoney" :key="'G'+index7">{{g|newmoney}}{{(index7)}}</i> -->
                        <i>{{totalMoney[0]|newmoney}}佰</i>
                        <i>{{totalMoney[1]|newmoney}}拾</i>
                        <i>{{totalMoney[2]|newmoney}}万</i>
                        <i>{{totalMoney[3]|newmoney}}仟</i>
                        <i>{{totalMoney[4]|newmoney}}佰</i>
                        <i>{{totalMoney[5]|newmoney}}拾</i>
                        <i>{{totalMoney[6]|newmoney}}元</i>
                        <i>{{totalMoney[7]|newmoney}}角</i>
                        <i>{{totalMoney[8]|newmoney}}分</i>
                        <!-- <i>拾</i><i>万</i><i>仟</i><i>佰</i><i>拾</i><i>元</i><i>角</i><i>分</i> -->
                      </em>
                      </div>
                    <div style="flex:2;"><em></em></div>
                  </div>
                  <div class="fakeTableBodyN">
                    <div style="flex:19; border-top:1px solid #000;">
                      <em style="text-align:left; padding:10px;">
                        <i>收款方式:</i>
                        <i>现金<font v-if="detailMes.cashMoney=='1'" style=" font-weight:bold; font-size: 22px; line-height: 0.7em; text-indent: -0.2em;">√</font><font v-else></font></i>
                        <i>转账<font v-if="detailMes.transferMoney=='1'" style=" font-weight:bold; font-size: 22px; line-height: 0.7em; text-indent: -0.2em;">√</font><font v-else></font></i>
                        <i>刷卡<font v-if="detailMes.cardMoney=='1'" style=" font-weight:bold; font-size: 22px; line-height: 0.7em; text-indent: -0.2em;">√</font><font v-else></font></i>
                        <i>微信公众号<font v-if="detailMes.onLineMoney=='1'||detailMes.onLineMoney==null" style=" font-weight:bold; font-size: 22px; line-height: 0.7em; text-indent: -0.2em;">√</font><font v-else></font></i>
                        <i>其他方式<font v-if="detailMes.otherMoney=='1'" style=" font-weight:bold; font-size: 22px; line-height: 0.7em; text-indent: -0.2em;">√</font><tt v-else></tt></i>
                      </em>
                      </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="invoiceBottom">
              <p><span>开票单位:{{detailMes.schoolName}}</span><span style="float:right">收款人:<em v-if="detailMes.onLineMoney=='1'||detailMes.onLineMoney==null">线上收款</em><em v-else>线下收款</em></span></p>
            </div>
          </div>
        </div>
        <div class="stepPages" v-if="active==1">
          <dl class="payBox">
            <dt>
              <img v-if="payImgUrl" :src="payImgUrl">
              <em v-else>图片正在生成中...</em>
            </dt>
            <dd>用户使用微信，支付宝，支持银联支付app“扫一扫”扫描二维码</dd>
          </dl>
        </div>
        <div class="stepPages" v-if="active==3">
          <div class="success">
            <dl>
              <dt>
                <i class="el-icon-success"></i>
                <h3>恭喜您，缴费成功</h3>
                </dt>
              <!-- <dd><em>您仍有2项费用未缴清</em><el-button @click="goToList" type="primary">立刻缴纳</el-button></dd> -->
            </dl>
          </div>
        </div>
      </div>
      <div class="bts">
        <el-button v-if="active==0" @click="backStep" type="primary" plain style="width:120px">返回上一步</el-button>
        <!-- <el-tooltip class="item" effect="dark" content="点击预览，右键图片另存保存图片！" placement="top">
        <el-button v-if="active==0" @click="saveImg" type="primary" plain style="width:120px">保存图片</el-button>
        </el-tooltip> -->
        <el-button v-if="active==0" @click="next" type="primary" style="width:120px">下一步</el-button>
        <el-button v-if="active==1" @click="unPay" type="primary" style="width:120px">取消支付</el-button>
        <el-button v-if="active==3" @click="finishBt" type="success" style="width:120px">完成</el-button>
        <el-button v-if="active==3" @click="watchImg" type="success" style="width:120px">查看电子收据</el-button>
      </div>
    </div>

    <!-- <el-image-viewer v-if="showViewer" :on-close="closeViewer" tooltip="60" :url-list="[imgUrl]" style="position: fixed; z-index:100; top:60px; left:0; right:0; bottom:0; margin:auto;" /> -->

    <div class="printBox" id="printBox" v-if="showViewer">
      <!-- <span class="close"  v-if="closebtshow" @click="closeImgLayer"><i class="el-icon-circle-close"></i></span> -->
      <div class="invoice" id="invoice">
        <span class="close"  v-if="closebtshow" @click="closeImgLayer"><i class="el-icon-circle-close"></i></span>
            <div class="invoiceTop">
              <h3>
                <span class="logo"><img src="./../assets/images/zpLogo_03.png"></span>收款专用收据<em>NO.{{detailMes.serialNumber}}</em>
                <div class="clear"></div>
                </h3>

              <P><span>姓名:{{detailMes.studentName}}</span><span>年级：{{detailMes.gradeName}}</span><span>班级:<em v-if="detailMes.className==null||detailMes.className==''||detailMes.className==undefined">未设置分班</em><em v-else>{{detailMes.className}}</em></span><span>联系方式:{{detailMes.mobile}}</span><span>收款日期:{{timeSet.year}}年{{timeSet.mounth+1}}月{{timeSet.day}}日</span></P>
            </div>
            <div class="invoiceCenter">
              <div class="fakeTable">
                <div class="fakeTableHeader">
                  <div style="flex:4"><em>项目</em></div>
                  <div style="flex:2"><em>数量</em></div>
                  <div style="flex:2"><em>单价</em></div>
                  <div style="flex:9">
                    <div><em>金额</em></div>
                    <div><span>佰</span><span>拾</span><span>万</span><span>仟</span><span>佰</span><span>拾</span><span>元</span><span>角</span><span>分</span></div>
                  </div>
                  <div style="flex:2"><em>备注</em></div>
                </div>
                <div class="fakeTableBody">
                  <div class="fakeTableBodyN" v-for="(a,index) in detailMes.itemList" v-show="detailMes.isDetailed==1" :key="index">
                    <div style="flex:4"><em>{{a.itemName}}</em></div>
                    <div style="flex:2"><em>1</em></div>
                    <div style="flex:2"><em>{{a.money}}</em></div>
                    <div style="flex:9">
                      <div>
                        <span v-for="(b,index2) in 9-a.listMoney.length" :key="'B'+index2"></span>
                        <span v-for="(c,index3) in a.listMoney" :key="'C'+index3">{{c}}</span>
                      </div>
                    </div>
                    <div style="flex:2"></div>
                  </div>
                  <div class="fakeTableBodyN" v-if="tuifei">
                    <div style="flex:4"><em>减免金额</em></div>
                    <div style="flex:2"><em>1</em></div>
                    <div style="flex:2"><em>{{jianmianNum}}</em></div>
                    <div style="flex:9">
                      <div>
                        <span v-for="(b,index4) in 9-jianmianList.length" :key="'B'+index4"></span>
                        <span v-for="(c,index5) in jianmianList" :key="'C'+index5">{{c}}</span>
                      </div>
                    </div>
                    <div style="flex:2"></div>
                  </div>
                  <div class="fakeTableBodyN">
                    <div style="flex:6;">
                      <em v-if="detailMes.isDetailed!=1">
                        <font style="display: inline-block; width:66%;">收费项</font><font style="display: inline-block; width:35%;">1</font>
                      </em>
                      <em v-else></em>
                    </div>
                    <div style="flex:2;"><em>合计</em></div>
                    <div style="flex:9;">
                      <div>
                        <span v-for="(d,index4) in 9-totalMoney.length" :key="'D'+index4"></span>
                        <span v-for="(e,index5) in totalMoney" :key="'E'+index5">{{e}}</span>
                      </div>
                    </div>
                    <div style="flex:2;"></div>
                  </div>
                  <div class="fakeTableBodyN">
                    <div style="flex:17;">
                      <em ref="daxie" id="daxie" style="text-align:left; padding:10px;">金额大写(大写):
                        <!-- <i v-for="(f,index6) in 9-totalMoney.length" :key="'F'+index6"></i>
                        <i v-for="(g,index7) in totalMoney" :key="'G'+index7">{{g|newmoney}}{{(index7)}}</i> -->
                        <i>{{totalMoney[0]|newmoney}}佰</i>
                        <i>{{totalMoney[1]|newmoney}}拾</i>
                        <i>{{totalMoney[2]|newmoney}}万</i>
                        <i>{{totalMoney[3]|newmoney}}仟</i>
                        <i>{{totalMoney[4]|newmoney}}佰</i>
                        <i>{{totalMoney[5]|newmoney}}拾</i>
                        <i>{{totalMoney[6]|newmoney}}元</i>
                        <i>{{totalMoney[7]|newmoney}}角</i>
                        <i>{{totalMoney[8]|newmoney}}分</i>
                        <!-- <i>拾</i><i>万</i><i>仟</i><i>佰</i><i>拾</i><i>元</i><i>角</i><i>分</i> -->
                      </em>
                      </div>
                    <div style="flex:2;"><em></em></div>
                  </div>
                  <div class="fakeTableBodyN">
                    <div style="flex:19; border-top:1px solid #000;">
                      <em style="text-align:left; padding:10px;">
                        <i>收款方式:</i>
                        <i>现金<font v-if="detailMes.cashMoney=='1'" style=" font-weight:bold; font-size: 22px; line-height: 0.7em; text-indent: -0.2em;">√</font><font v-else></font></i>
                        <i>转账<font v-if="detailMes.transferMoney=='1'" style=" font-weight:bold; font-size: 22px; line-height: 0.7em; text-indent: -0.2em;">√</font><font v-else></font></i>
                        <i>刷卡<font v-if="detailMes.cardMoney=='1'" style=" font-weight:bold; font-size: 22px; line-height: 0.7em; text-indent: -0.2em;">√</font><font v-else></font></i>
                        <i>微信公众号<font v-if="detailMes.onLineMoney=='1'||detailMes.onLineMoney==null" style=" font-weight:bold; font-size: 22px; line-height: 0.7em; text-indent: -0.2em;">√</font><font v-else></font></i>
                        <i>其他方式<font v-if="detailMes.otherMoney=='1'" style=" font-weight:bold; font-size: 22px; line-height: 0.7em; text-indent: -0.2em;">√</font><tt v-else></tt></i>
                      </em>
                      </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="imgBox">
              <img class="yin" :src="detailMes.baseUrl+detailMes.sealUrl">
            </div>
            <div class="invoiceBottom">
              <p><span>开票单位:{{detailMes.schoolName}}</span><span style="float:right">收款人:<em v-if="detailMes.onLineMoney=='1'||detailMes.onLineMoney==null">线上收款</em><em v-else>线下收款</em></span></p>
            </div>
          </div>
      <div class="bts" v-if="btshow"><el-button type="primary" @click="printImg" style="width:120px">打印</el-button></div>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  // FIXME:数据内容
  data() {
    return {
      active:0,
      pidF:this.$route.params.pid,
      sidF:this.$route.params.sid,
      totalMoney:[],
      tuifei:true,
      detailMes:{},
      payImgUrl:'',
      imgUrl:'',
      imgLink:[],
      showViewer: false, // 显示查看器
      btshow:true,
      closebtshow:true,
      jianmianList:[],
      jianmianNum:0,
      url:'',
      timeSet:{
        year:'',
        mounth:'',
        day:''
      }
    }
  },
  components: { ElImageViewer },
  filters:{
    newmoney:function(val){
      var oldfont = "";
      if(!val)return '--';
      switch(val){
        case "0":
          oldfont = "零";
          break;
          case "1":
          oldfont = "壹";
          break;
          case "2":
          oldfont = "贰";
          break;
          case "3":
          oldfont = "叁";
          break;
          case "4":
          oldfont = "肆";
          break;
          case "5":
          oldfont = "伍";
          break;
          case "6":
          oldfont = "陆";
          break;
          case "7":
          oldfont = "柒";
          break;
          case "8":
          oldfont = "捌";
          break;
          case "9":
          oldfont = "玖";
          break;
          default:
          oldfont = "";
      }
      return oldfont;
    }
  },
  mounted() {
    this.haveLogin();
  },
  watch:{
    active(val){
      if(val>2){
        this.timeLoop();
      }
    }
  },
  methods: {
    // 判断是否有验证
    haveLogin:function(){
      this.$store.commit('SetCanBack',false);
      if(!this.$store.getters.GetHaveLogin){
        this.backHome();
      }else{
        this.getDetail();
      }
    },
    // TODO: 返回首页
    backHome:function(){
      this.$router.push({name:'enterPage'});
      return;
    },
    // TODO:第一步获取缴费清单
    getDetail:function(){
      this.jianmianList = []
      var url = '/api/payment/load/detail';
      var params = {projectId:this.pidF,studentId:this.sidF,mobile:this.$store.getters.GetPhoneNum,studentSource:this.$store.getters.GetStudentFrom}
      this.$post(url,params).then(res=>{
        console.log("获取缴费详情",res);
        this.detailMes = res.data.result;
        if(res.data.result.tuitionMoney==null||res.data.result.tuitionMoney==undefined||res.data.result.tuitionMoney==""||parseFloat(res.data.result.tuitionMoney).toFixed(2)*1000==0){
          this.tuifei = false;
        }
        var riqi = new Date();
        this.timeSet.year = riqi.getFullYear();
        this.timeSet.mounth = riqi.getMonth();
        this.timeSet.day = riqi.getDate();
        this.setMoneys();
      })
    },
    // TODO:设置数字
    // setMoneys:function(){
    //   var that = this;
    //   var newList = new Array();
    //   var tNum = 0;
    //   that.detailMes.itemList.forEach(function(val,index){
    //     that.detailMes.itemList[index].money = parseFloat(val.money).toFixed(2);
    //     that.detailMes.itemList[index].listMoney = [];
    //     tNum += parseFloat(val.money);
    //     var list = new Array();
    //     var arr = parseFloat(val.money).toFixed(2).split('');
    //     for(var i=0,len = arr.length;i<len;i++){
    //       list.push(arr[i]);
    //     }
    //     that.detailMes.itemList[index].listMoney = that.dropListE('.',list);
    //   })
    //   var jianmianN = JSON.parse(JSON.stringify(that.detailMes.tuitionMoney));
    //   that.jianmianNum = parseFloat(that.detailMes.tuitionMoney==null?0:that.detailMes.tuitionMoney).toFixed(2);
    //   that.detailMes.tuitionMoney = parseFloat(that.detailMes.tuitionMoney==null?0:that.detailMes.tuitionMoney).toFixed(2).split('');
    //   for(var p=0,lenn = that.detailMes.tuitionMoney.length;p<lenn;p++){
    //     that.jianmianList.push(that.detailMes.tuitionMoney[p]);
    //   }
    //   that.jianmianList = that.dropListE('.',that.jianmianList);
    //   var allNum = parseFloat(tNum)-parseFloat(jianmianN==null?0:jianmianN);
    //   that.totalMoney = that.dropListE('.',parseFloat(allNum).toFixed(2).split(''));
    //   var lastIndex = 9-that.totalMoney.length;
    //   for(var a=0,lenn =lastIndex;a<lenn;a++){
    //     that.totalMoney.unshift("");
    //   }
    //   console.log(lastIndex);
    //   console.log(that.detailMes.itemList);
    //   console.log(that.totalMoney);
    //   console.log(that.jianmianList);
    // },
    // TODO:设置数字
    setMoneys:function(){
      var that = this;
      var newList = new Array();
      var tNum = 0;
      that.detailMes.itemList.forEach(function(val,index){
        that.detailMes.itemList[index].money = (parseFloat(val.money).toFixed(2)*1000)/1000;
        that.detailMes.itemList[index].listMoney = [];
        tNum += parseFloat(val.money).toFixed(2)*1000;
        var list = new Array();
        var arr = parseFloat(val.money).toFixed(2).split('');
        for(var i=0,len = arr.length;i<len;i++){
          list.push(arr[i]);
        }
        that.detailMes.itemList[index].listMoney = that.dropListE('.',list);
      })
      that.jianmianNum = parseFloat(that.detailMes.tuitionMoney==null?0:parseFloat(that.detailMes.tuitionMoney).toFixed(2)*1000>0?that.detailMes.tuitionMoney:-(that.detailMes.tuitionMoney)).toFixed(2);
      var allNum = (tNum-parseFloat(that.detailMes.tuitionMoney==null?0:parseFloat(that.detailMes.tuitionMoney).toFixed(2)*1000>0?that.detailMes.tuitionMoney:-(that.detailMes.tuitionMoney)).toFixed(2)*1000)/1000;
      that.detailMes.tuitionMoney = parseFloat(that.detailMes.tuitionMoney==null?0:parseFloat(that.detailMes.tuitionMoney).toFixed(2)*1000>0?that.detailMes.tuitionMoney:-(that.detailMes.tuitionMoney)).toFixed(2).split('');
      // that.jianmianNum = parseFloat(that.detailMes.tuitionMoney==null?0:(that.detailMes.tuitionMoney)).toFixed(2);
      // var allNum = (tNum-parseFloat(that.detailMes.tuitionMoney==null?0:(that.detailMes.tuitionMoney)).toFixed(2)*1000)/1000;
      // that.detailMes.tuitionMoney = parseFloat(that.detailMes.tuitionMoney==null?0:(that.detailMes.tuitionMoney)).toFixed(2).split('');
      for(var p=0,lenn = that.detailMes.tuitionMoney.length;p<lenn;p++){
        that.jianmianList.push(that.detailMes.tuitionMoney[p]);
      }
      that.jianmianList = that.dropListE('.',that.jianmianList);
      // var allNum = (tNum-parseFloat(that.detailMes.tuitionMoney==null?0:-(that.detailMes.tuitionMoney)).toFixed(2)*1000)/1000;
      // that.totalMoney = that.dropListE('.',parseFloat(allNum).toFixed(2).split(''));
      that.totalMoney = that.dropListE('.',(parseFloat(allNum).toFixed(2)*1000>0?allNum:-(allNum)).toFixed(2).split(''));
      var lastIndex = 9-that.totalMoney.length;
      for(var a=0,lenn =lastIndex;a<lenn;a++){
        that.totalMoney.unshift("");
      }
      // console.log(lastIndex);
      // console.log(that.detailMes.itemList);
      // console.log(that.totalMoney);
      // console.log(that.jianmianList);
    },
    // TODO:数组删除
    dropListE:function(str,arr){
      var index = arr.indexOf(str);
      arr.splice(index,1);
      return arr;
    },
    // TODO:获取支付二维码
    getQRCode:function(){
      var url = '/api/payment/load/code';
      var params = {projectId:this.pidF,studentId:this.sidF,serialId:this.detailMes.serialId,serialNumber:this.detailMes.serialNumber}
      this.$post(url,params).then(res=>{
        console.log("获取支付码",res)
        this.payImgUrl = res.data.result.url
      })
    },
    // TODO:检测支付链接
    payFinished:function(){
      var havp = false;
      var url = '/api/payment/load/payment/state';
      var params = {serialNumber:this.detailMes.serialNumber};
      this.$post(url,params).then(res=>{
        console.log("获取支付状态",res)
        if(res.data.result=='Success'){
          havp = true
          this.next();
        }
      })
      return havp;
    },
    // TODO:下一步操作
    next() {
      this.active++;
      console.log(this.active);
      switch(this.active)
      {
        case 1:
          this.getQRCode();
          this.timeLoop();
          this.payFinished();
          break;
        case 2:
          this.active++;
          break;
      }
    },
    // TODO:设置时间循环
    timeLoop:function(){
      var that = this;
      var jsq = setInterval(function(){
        if(that.active!=1){
          clearInterval(jsq);
        }else{
        if(that.payFinished()){
          clearInterval(jsq);
          that.active+=2;
        }
        }
      },5000)
    },
    // TODO:取消支付
    unPay:function(){
      this.active+=3;
      this.$router.push({name:'enterPage'});
    },
    // TODO:去缴费列表
    goToList:function(){
      this.$router.push({name:'payOperation'});
    },
    // TODO:保存图片
    saveImg:function(){
      var that = this;
      html2canvas(document.getElementById("invoice"),{scale:2}).then(function(canvas){
        that.imgUrl = canvas.toDataURL("image/png");
      })
      this.showViewer = true
    },
    printImg(){
      this.btshow = false;
      setTimeout(function(){
        window.print(document.getElementById("printBox"));
      },1000)
    },
    closeImgLayer:function(){
      this.showViewer = false;
      this.$store.commit('SetHeaderShow',true);
      this.btshow = true;
    },
    // TODO: 返回上一步
    backStep:function(){
      console.log(123);
      this.$router.push({name:'payOperation'});
    },
    // TODO:完成按钮操作
    finishBt:function(){
      this.$router.push({name:'enterPage'});
    },
    // TODO: 查看
    watchImg:function(){
      this.timeLoop();
      // this.$router.push({name:'payQuery'});
      this.jianmianList = [];
      this.detailMes = {};
      this.$store.commit('SetHeaderShow',false);
      this.tuifei = true;
      var url = '/api/payment/load/serial/detail';
      var params = {projectId:this.pidF,studentId:this.sidF}
      this.$post(url,params).then(res=>{
        console.log("获取详情",res)
        this.detailMes = res.data.result;
        if(res.data.result.tuitionMoney==null||res.data.result.tuitionMoney==undefined||res.data.result.tuitionMoney==""||parseFloat(res.data.result.tuitionMoney).toFixed(2)*1000==0){
          this.tuifei = false;
        }
        var riqi = new Date();
        this.timeSet.year = riqi.getFullYear();
        this.timeSet.mounth = riqi.getMonth();
        this.timeSet.day = riqi.getDate();
        this.setMoneys();
        this.showViewer = true
      })
    },
    onPreview() {
      this.showViewer = true
    },
    // 关闭查看器
    closeViewer() {
      this.showViewer = false
    }
  }
}
</script>

<style>
.el-image-viewer__close i{ font-size: 30px; color: #ffffff;}
</style>
